html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
    Droid Sans, Helvetica Neue, sans-serif;
  overflow-x: hidden;
}

p {
  margin: 0;
}

:root {
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

/* ScrollBar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: #cac6c6;
}
::-webkit-scrollbar-thumb {
  background-color: #333333;
  border-radius: 8px;
}

@font-face {
  font-family: 'iconfont';
  src: url('/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  transition: background-color 0.2s, color 0.2s;
}

html.dark {
  background-color: #121212;
}

/* Light Mode */
.layout[color-mode='light'] {
  --surface1: #cccccc;
  --surface2: #f2f2f2;
  --surface3: #ffffff;
  --surface4: #f9f9f9;
  --element1: #555555;
  --element2: #333333;
  --element3: #000000;
  --element4: #aaaaaa;
  --element5: #888888;
  --element6: #e0e0e0;
  --element7: #eeeeee;
  --element8: #b3b3b3;
  --element9: #918f8f;
  --hljs0: #f3f3f3;
  --hljs1: #444444;
  --hljs2: #697070;
  --hljs3: #7d7d7d;
  --hljs4: #7c160d;
  --hljs5: #ab5656;
  --hljs6: #71975c;
  --hljs7: #48711e;
  --hljs9: #4d8fb2;
  --elementInverse: #eee;
  --primary: #01408e;
  --secondary: #3c5d5c;
  --tertiary: #fff7d6;
}

/* Dark Mode */
.layout[color-mode='dark'] {
  --surface1: #ebebeb;
  --surface2: #333333;
  --surface3: #121212;
  --surface4: #191919;
  --element1: #d5d5d5;
  --element2: #cccccc;
  --element3: #ffffff;
  --element4: #eaeaea;
  --element5: #e1e1e1;
  --element6: #333333;
  --element7: #555555;
  --element8: #8e8c8c;
  --element9: #cac6c6;
  --hljs0: #333333;
  --hljs1: #d0d0d0;
  --hljs2: #c3c6c6;
  --hljs3: #cbcbcb;
  --hljs4: #cba29e;
  --hljs5: #ab5656;
  --hljs6: #ddbbbb;
  --hljs7: #b6c6a5;
  --hljs9: #b8d2e0;
  --elementInverse: #111;
  --primary: #8fceff;
  --secondary: #72faca;
  --tertiary: #eee8a9;
}

/*!
  Theme: Default
  Description: Original highlight.js style
  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
  Maintainer: @highlightjs/core-team
  Website: https://highlightjs.org/
  License: see project LICENSE
  Touched: 2021
*/
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
code.hljs {
  padding: 3px 5px;
}
.hljs {
  background: var(--hljs0);
  color: var(--hljs1);
}
.hljs-comment {
  color: var(--hljs2);
}
.hljs-punctuation,
.hljs-tag {
  color: var(--hljs3);
}
.hljs-tag .hljs-attr,
.hljs-tag .hljs-name {
  color: var(--hljs1);
}
.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag {
  font-weight: 500;
}
.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
  color: var(--hljs4);
}
.hljs-section,
.hljs-title {
  color: var(--hljs4);
  font-weight: 500;
}
.hljs-link,
.hljs-operator,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
  color: var(--hljs5);
}
.hljs-literal {
  color: var(--hljs6);
}
.hljs-addition,
.hljs-built_in,
.hljs-bullet,
.hljs-code {
  color: var(--hljs7);
}
.hljs-meta {
  color: var(--hljs7);
}
.hljs-meta .hljs-string {
  color: var(--hljs9);
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 500;
}


